<template>
  <el-sub-menu index="4">
    <template #title>事件添加</template>
    <el-menu-item index="4-1" @click.native="">
      <div @click="getDrawPosition(map)">事件添加</div>
    </el-menu-item>
    <el-menu-item index="4-2" @click.native="">
      <div @click="removeDrawPosition(map)">取消添加</div>
    </el-menu-item>
  </el-sub-menu>

  <el-dialog
    v-model="dialogFormVisible"
    title="添加事件"
    width="32%"
    draggable
    center
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-position="left"
      label-width="100px"
    >
      <el-form-item label="事件编号:" prop="event_number">
        <el-input v-model="form.event_number" />
      </el-form-item>
      <el-form-item label="事件类型:" prop="event_type">
        <el-input v-model="form.event_type" />
      </el-form-item>
      <el-form-item label="事件等级:" prop="event_level">
        <el-input v-model="form.event_level" />
      </el-form-item>
      <el-form-item label="发生时间:" prop="event_time">
        <el-input v-model="form.event_time" />
      </el-form-item>
      <el-form-item label="发生地点:" prop="event_addr">
        <el-input v-model="form.event_addr" />
      </el-form-item>
      <el-form-item label="车牌号:" prop="event_car">
        <el-input v-model="form.event_car" />
      </el-form-item>
      <el-form-item label="驾驶员:" prop="event_person">
        <el-input v-model="form.event_person" />
      </el-form-item>
      <el-form-item label="处理状态:" prop="event_state">
        <!-- <el-input v-model="form.event_state" /> -->
        <select v-model="form.event_state">
          <option value="0">未处理</option>
          <option value="1">处理中</option>
          <option value="2">已处理</option>
        </select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancle">取消</el-button>
        <el-button type="primary" @click="event_add(ruleFormRef)">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getDrawPosition,
  removeDrawPosition,
  dialogFormVisible,
  getEventAdd,
  addevent_source,
} from "./hooks/addEventDraw"

let map = ref()
onMounted(() => {
  map.value = useGlobalMap()
})
const date = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, "0")
const day = String(date.getDate()).padStart(2, "0")
const hours = String(date.getHours()).padStart(2, "0")
const minutes = String(date.getMinutes()).padStart(2, "0")
// const seconds = String(date.getSeconds()).padStart(2, "0")

const formattedDate = `${year}.${month}.${day} ${hours}:${minutes}`
// console.log(formattedDate)

//表单绑定的数据
const form = reactive({
  event_number: "",
  event_type: "",
  event_level: null,
  event_time: formattedDate,
  event_addr: "",
  event_car: "",
  event_person: "",
  event_state: "0",
})

const rules = ref({
  event_number: [
    {
      required: true,
      message: "事件编号不能为空",
      tigger: "blur",
    },
  ],
  event_type: [
    {
      required: true,
      message: "事件类型不能为空",
      tigger: "blur",
    },
  ],
  event_level: [
    {
      required: true,
      message: "事件等级不能为空",
      tigger: "blur",
    },
  ],
  event_time: [
    {
      required: true,
      message: "发生时间不能为空",
      tigger: "blur",
    },
  ],
  event_addr: [
    {
      required: true,
      message: "发生地点不能为空",
      tigger: "blur",
    },
  ],
  event_car: [
    {
      required: true,
      message: "车牌号不能为空",
      tigger: "blur",
    },
  ],
  event_person: [
    {
      required: true,
      message: "驾驶员不能为空",
      tigger: "blur",
    },
  ],
  event_state: [
    {
      required: true,
      message: "处理状态不能为空",
      tigger: "blur",
    },
  ],
})

const ruleFormRef = ref()

const event_add = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      getEventAdd(form)
      dialogFormVisible.value = false
      for (let key in form) {
        form[key] = null
      }
    } else {
      console.log("提交错误！", fields)
    }
  })
}
function handleCancle() {
  addevent_source.clear()
  dialogFormVisible.value = false
  for (let key in form) {
    form[key] = null
  }
}
</script>

<style scoped></style>
